<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    
    
    <!-- <script src="d3.min.js"></script> -->
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script>
       //准备初始数据
       const data = [
            {name:'香蕉',value:100},
            {name:'苹果',value:120},
            {name:'橘子',value:165},
            {name:'山竹',value:90},
            {name:'菠萝',value:110},
       ];
       const width = 800 ;
       const height = 500 ;
       const margin = 50 ;
       const innerWidth = width - margin * 2 ;
       const innerHeight = height - margin * 2 ;
       const originPoint = {x:margin,y:margin}; 
       

       //准备比例尺
       //1. 准备横轴分段比例尺比例尺
       const xScale = d3.scaleBand()
            .domain(data.map(d=>d.name))
            .range([0,innerWidth])
            .padding(0.2)
            .round(true);

       //2. 准备纵轴线性比例尺     
       const yScale = d3.scaleLinear()
            // .domain([0,data.map(d=>d.value).reduce((a,b) => Math.max(a,b))])
            .domain([0,d3.max(data,d=>d.value)])
            .range([innerHeight,0])
            .nice();


        //3. 准备颜色的序数比例尺
        const colorScale = d3.scaleOrdinal()
            .domain(data.map(d=>d.name))
            .range(d3.schemeSet1);
            
            
        //创建svg画布
        const svg = d3.select('body').append('svg')
                        .attr('width',width)
                        .attr('height',height)
                        .style('border','1px solid #ccc') ;

        //绘制标题
        svg.append('text')
            .attr('x',width/2)
            .attr('y',margin/2)
            .text('水果销售量(周)')
            .attr('text-anchor','middle')
            .attr('dominant-baseline','middle')
            .attr('stroke','#666')
            .attr('font-size',25);

        //绘制横轴
        let g = svg.append('g').attr('transform',`translate(${margin},${innerHeight + margin})`);
        g.append('line')
            .attr('x1',0)
            .attr('y1',0)
            .attr('x2',innerWidth)
            .attr('y2',0)
            .attr('stroke','#000');

        data.forEach((e,i) => {
            const startX = xScale(e.name);
            const partWidth = xScale.bandwidth() ;
            g.append('line')
                .attr('x1',startX + partWidth/2)
                .attr('y1',0)
                .attr('x2',startX + partWidth/2)
                .attr('y2',10)
                .attr('stroke','#000');

            g.append('text')
                .attr('x',startX + partWidth/2)
                .attr('y',20)
                .text(e.name)
                .attr('text-anchor','middle')
                .attr('dominant-baseline','middle')
                .attr('stroke',colorScale(e.name))
                .attr('font-size',15);
        })    


        //绘制纵轴
        g = svg.append('g').attr('transform',`translate(${margin},${margin})`);
        g.append('line')
            .attr('x1',0)
            .attr('y1',0)
            .attr('x2',0)
            .attr('y2',innerHeight)
            .attr('stroke','#000');
        const ticks = yScale.ticks(6);
        ticks.forEach((e,i) => {
            const startY = yScale(e) ;
            g.append('line')
                .attr('x1',0)
                .attr('y1',startY )
                .attr('x2',-10)
                .attr('y2',startY )
                .attr('stroke','#000');


            g.append('text')
                .attr('x',-25)
                .attr('y',startY )
                .text(e)
                .attr('text-anchor','middle')
                .attr('dominant-baseline','middle')
                .attr('stroke','#666')
                .attr('font-size',12);
                    
        })


        //绘制矩形
        g = svg.append('g').attr('transform' , `translate(${margin},${margin})`);
        data.forEach((e,i) => {
            g.append('rect')
                .attr('x',xScale(e.name))
                .attr('y',yScale(e.value))
                .attr('width',xScale.bandwidth())
                .attr('height',innerHeight - yScale(e.value))
                .attr('fill',colorScale(e.name))
        })





    </script>
</body>
</html>